<!DOCTYPE html>
<html>
<head>
    <title>Content Management</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>

    <!-- Twitter Bootstrap -->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <!--<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->

    <!-- Material Design for Bootstrap -->
    <script src="//cdn.bootcss.com/bootstrap-material-design/0.3.0/js/material.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap-material-design/0.3.0/js/ripples.min.js"></script>

</head>
<body>
  <video id="video" width="480" height="360" controls>
    <source src="<%= movieUrl %>" type="video/mp4">
    Your browser does not support the video tag.
  </video>

 <div>
    <div class="form-group">
        <label for="videoStart">片段开始:  </label>
        <input type="text" class="form-control" id="videoStart" value="<%= seconds %>">
    </div>

     <div class="form-group">
        <label for="videoEnd">片段结束:  </label>
        <input type="text" class="form-control" id="videoEnd" value="<%= end %>">
    </div>

    <div class="form-group">
        <label for="subtitleStart">字幕开始:  </label>
        <input type="text" class="form-control" id="subtitleStart" value="<%= seconds %>">
    </div>
    <div class="form-group">
        <label for="subtitleEnd">字幕结束:  </label>
        <input type="text" class="form-control" id="subtitleEnd" value="<%= end %>">
    </div>

    <div class="form-group">
        <label for="english">英语:  </label>
        <input type="text" class="form-control" id="english" value="<%= text %>" size="150">
    </div>

    <div class="form-group">
        <label for="chinese">汉语:  </label>
        <input type="text" class="form-control" id="chinese" value="<%= text %>" size="150">
    </div>


    <div>
        <button type="button" onclick="preview()">预览</button>
        <button type="button" onclick="confirm()">确认</button>

    </div>

 </div>


</body>

<script>

var myVideo = document.getElementById("video");


myVideo.currentTime = <%= seconds %>
myVideo.play();

var end = <%= end%>

function autoPause() {
    if(myVideo.currentTime >= end) {
        myVideo.pause();
    }
}

myVideo.addEventListener("timeupdate", autoPause);

function preview() {
    var videoStart = document.getElementById("videoStart");
    myVideo.currentTime = parseFloat(videoStart.value);

    var videoEnd = document.getElementById("videoEnd");
    end = parseFloat(videoEnd.value);
    myVideo.play();
}

function confirm() {
  var videoStart = document.getElementById("videoStart");
  var videoEnd = document.getElementById("videoEnd");
  var subtitleStart =  document.getElementById("subtitleStart");
  var subtitleEnd =  document.getElementById("subtitleEnd");
  var english = document.getElementById("english");
  var chinese = document.getElementById("chinese");


  if (!videoStart.value || !videoEnd.value || !subtitleStart.value || !subtitleEnd.value || !english.value || !chinese.value)
  {
    alert("部分内容为空，拒绝提交");
    return;
  }

  $.post("/confirm", { videoStart: videoStart.value,
                       videoEnd: videoEnd.value,
                       subtitleStart: subtitleStart.value,
                       subtitleEnd: subtitleEnd.value,
                       english: english.value,
                       chinese: chinese.value,
                       word: "<%= word %>",
                       contentId: "<%= contentId %>"

        }, function(data, status) {
    console.log(data);
    alert(status);
  });
}

</script>


</html>
